<template>
  <view>
    <view class="header">
      <view class="header-bg" :style="{ 'background-image': 'url('+ activityInfo.avatar +')' }"></view>
      <view class="center-info" style="font-family:Arial, Helvetica, sans-serif;">
        <view>
          <u-text :text="title" size="22" color="#ffffff" align="center" />
        </view>
        <u-gap height="10" />
        <u-count-down
            :time="timestamp"
            format="DD:HH:mm:ss"
            autoStart
            millisecond
            @change="onChange"
        >
          <view class="time">
              <text class="time__item">{{ timeData.days }}&nbsp;天&nbsp;</text>
              <text class="time__item">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}&nbsp;时&nbsp;</text>
              <text class="time__item">{{ timeData.minutes }}&nbsp;分&nbsp;</text>
              <text class="time__item">{{ timeData.seconds }}&nbsp;秒</text>
          </view>
        </u-count-down>
      </view>
    </view>
    <goods-item-seckill
      v-for="(item, index) in listData"
      :key="index"
      :data="item"
      :activityId="activityId"
      :isLink="isBegin"
    />

    <u-gap height="10" />
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { activity } from '@/utils/api'
import goodsItemSeckill from '@/components/goods-item-seckill/goods-item-seckill.vue'

const timeData = ref({})
const activityId = ref('')
const activityInfo = ref({})
const listData = ref([])


const isBegin = computed(() => {
  return +new Date(activityInfo.value.beginTime) < +new Date()
})

const title = computed(() => {
  if (isBegin.value) {
    return '距离活动结束'
  } else {
    return '距离活动开始'
  }
})

const timestamp = computed(() => {
  if (isBegin.value) {
    return +new Date(activityInfo.value.endTime) - +new Date()
  } else {
    return +new Date(activityInfo.value.beginTime) - +new Date()
  }
})

function onChange(e) {
  timeData.value = e
}
function init() {
  const params = {
    "pageIndex": 1,
    "pageSize": 1000,
    "activityId": activityId.value
  }
  activity.seckillGoods(params).then(res => {
    console.log(res)
    listData.value = res.data.items
  })
}

onLoad(options => {
  activityId.value = options.id || ''
  activityInfo.value = options;
  if (!options.id) {
    uni.showModal({
      title: '提示',
      content: '活动不存在',
      showCancel: true,
      success: ({ confirm, cancel }) => {
        if (confirm) {
          uni.reLaunch({ url: '/pages/index/index?index=0' })
        }
      }
    })
  }
  init()
})
</script>

<style lang="scss" scoped>
  .header {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;

    .header-bg {
      width: 100%;
      height: 200px;
      background-size: cover;
      background-position: center center;
      filter: blur(4px) brightness(0.9) saturate(0.5); /* 添加模糊和亮度调节 */
      position: absolute;
      left: 0;
      top: 0;
    }

    &::after {
      position: absolute;
      content: '';
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background-color: rgba(0, 0, 0, 0.3);
      z-index: 1;
    }

    .center-info {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 10;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }

  .time__item {
    color: #ffffff;
    font-size: 18px;
  }
</style>